<template>
  <div>
    <div style="font-size:18px;">提现列表</div>
    <hr>
    <br>   
    <div class="filter-container">

<!--       <el-select clearable style="width: 180px" class="filter-item" v-model="listQuery.orgId" placeholder="审核状态">
        <el-option v-for="item in bangHuiOptions" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>

      <el-select clearable style="width: 180px" class="filter-item" v-model="listQuery.orgId" placeholder="打款状态">
        <el-option v-for="item in bangHuiOptions" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select> -->

      <el-select clearable style="width: 180px" class="filter-item" v-model="listQuery.orgId" placeholder="选择店铺">
        <el-option v-for="item in bangHuiOptions" :key="item.id" :label="item.name" :value="item.id">
        </el-option>
      </el-select>

      <div class="filter-item">
        <!-- <el-date-picker
          v-model="listQuery.start"
          type="date"
          placeholder="选择起始日期">
        </el-date-picker> -->
        <el-date-picker
          v-model="value6"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>

      <el-button class="filter-item" style="margin-left: 30px;" type="primary" icon="search" @click="handleFilter">搜索</el-button>
    </div>

    <!-- 表身 -->
    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 1500px">
      
      <!-- <el-table-column align="center" label="序号" 
      type="index" :index="indexMethod" width="65">
      </el-table-column> -->
      
      <el-table-column align="center" label="收款人姓名" width="126">
        <template scope="scope">
          <!-- <img v-if="scope.row.name" :src="scope.row.image" class="avatar">
          <span v-else="!scope.row.image">图片缺失</span> -->
          <span>{{scope.row.name}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="账号类型" width="160">
        <template scope="scope">
          <span>{{scope.row.accountType}}</span>
        </template>
      </el-table-column>

      <el-table-column width="160px" align="center" label="收款人账号">
        <template scope="scope">
          <span>{{scope.row.payeeAccount}}</span>
        </template>
      </el-table-column>

      <el-table-column width="160px" align="center" label="提款金额">
        <template scope="scope">
          <span>{{scope.row.withdrawalAmount}}</span>
        </template>
      </el-table-column>

      <el-table-column width="120" align="center" label="手续费">
        <template scope="scope">
          <span>{{scope.row.fee}}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column width="100px" align="center" label="审核状态">
        <template scope="scope">
          <span style='color:red;' class="link-type" @click='handleChangePoint(scope.row)'>{{scope.row.checkStatus}}</span>
        </template>
        <template scope="scope">
          <el-tag type="danger">{{scope.row.checkStatus}}</el-tag>
        </template>
      </el-table-column> -->
      
      <!-- <el-table-column width="120" align="center" label="审核回复">
        <template scope="scope">
          <span>{{scope.row.checkReply}}</span>
        </template>
      </el-table-column> -->

      <el-table-column width="120" align="center" label="申请时间">
        <template scope="scope">
          <span>{{scope.row.applyTime}}</span>
        </template>
      </el-table-column>
      
      <!-- <el-table-column width="120" align="center" label="是否打款">
        <template scope="scope">
          <span>{{scope.row.isPay}}</span>
        </template>
      </el-table-column> -->

      <!-- <el-table-column width="120" align="center" label="打款截图">
        <template scope="scope">
          <span>{{scope.row.payScreenshots}}</span>
        </template>
      </el-table-column> -->

      <el-table-column align="center" label="打款截图" width="126">
        <template scope="scope">
          <img v-if="scope.row.name" :src="scope.row.payScreenshots" class="avatar">
          <span v-else="!scope.row.image">图片缺失</span>
          <!-- <span>{{scope.row.name}}</span> -->
        </template>
      </el-table-column>
      
      <el-table-column align="center" label="操作" width="200">
        <template scope="scope">
          <el-button size="small" type="success"  @click="handleGoDetail(scope.row)">详情
          </el-button>
          <el-button size="small" type="warning"  @click="handleChangeInfo(scope.row)">修改
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageIndex"
        :page-sizes="[10,20,30, 50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    

    <!-- 修改信息对话框 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form class="small-space" :model="infoTemp" label-position="left" label-width="70px" style='width: 400px; margin-left:50px;'>
        <el-form-item label="ID">
          <el-input v-model="infoTemp.name" style="width: 200px;"></el-input>
        </el-form-item>
        
        <el-form-item label="体型">
          <el-input v-model="infoTemp.body" style="width: 200px;"></el-input>
        </el-form-item>

        <el-form-item label="帮会">
          <el-select class="filter-item" style="width: 200px;" v-model="infoTemp.organId" placeholder="请选择帮会">
            <el-option v-for="item in  bangHuiOptions" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="QQ">
          <el-input v-model="infoTemp.qq" style="width: 200px;"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="comfirmChangeInfo">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>
<script>
    import $ from 'jquery';
    import Vue from 'vue';
    import { withdrawListData } from '../../utils/resourse';


  export default {
    data() {
        return {
          value6: '',
          list: null,
          total: null,
          dialogDeleteVisible: false,
          num1: 100,
          listLoading: false,
          listQuery: {
            end: null,
            name: null,
            orgId: null,
            pageIndex: 1,
            pageSize: 10,
            start: null
          },
          infoTemp: {
            id: null,
            name: null,
            body: null,
            qq: null,
            organId: null
          },
          pointTemp: {
            userId: null,
            pointNum: 0,
            reason: null
          },
          temp: {
            id: undefined,
            importance: 0,
            remark: '',
            timestamp: 0,
            title: '',
            type: '',
            status: ''
          },
          deleteForm: {
            id: '',
            reason: '',
            status: ''
          },
          bangHuiOptions: [
            {id: "1", name: "状态1"},
            {id: "2", name: "状态2"},
            {id: "3", name: "状态3"},
            {id: "4", name: "状态4"}
          ],
          // calendarTypeOptions,
          dialogFormVisible: false,
          dialogStatus: '',
          textMap: {
            update: '编辑',
            create: '创建'
          },
          dialogPointVisible: false,
          pvData: [],
          tableKey: 0
        };
    },
    mounted(){
        var self=this;
        this.getList()
    },
    methods: {
      getList(){
        console.log(withdrawListData)
        this.list = withdrawListData
        this.total = withdrawListData.length
      },
      handleChange(value) {
        console.log(value);
      },
      indexMethod(index) {
        return index + 1;
      },
      handleFilter() {       //条件搜索
        this.listQuery.pageIndex = 1
        if(this.listQuery.start){
          this.listQuery.start = parseTime1(this.listQuery.start)
          // console.log(this.listQuery.end)
        }else{
          this.listQuery.start = null
        }
        // console.log(parseTime(this.listQuery.end))
        // console.log(parseTime(this.listQuery.end.toString()))
        // console.log(this.listQuery.end.toString())  
        // console.log(this.listQuery)
        this.getList()
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.pageIndex = val
        this.getList()
      },
      handleChange(value) {  //修改积分时的数字
        // console.log(value);
      },
      handleDelete(row) {
        let index = indexOfArray(row.name,this.list)
        this.$prompt('请输入删除原因', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          showInput: true,
          inputType: 'text',
          inputPlaceholder: '请输入内容',
        }).then(({ value }) => {
          let query = {
            id: row.id,
            status: 3,
            reason: value
          }
          updateStatus(query).then(res =>{
            console.log(res)
            this.list.splice(index,1)
            this.total = this.list.length
            this.$message({
              type: 'success',
              message: '删除成功',
              duration: 1500
            });
          }).catch(() => {
                  
          });
        }).catch(() => {
                  
        });
        
      },
      // comfirmDelete() {
      //   this.deleteForm.status = 3
      //   updateStatus(deleteForm).then(res=>{ //拉黑接口
      //     this.deleteForm.id = ''
      //     this.dialogFormVisible = false
      //   })
      // },
      handleChangeInfo(row) {
        this.infoTemp.name = row.name
        this.infoTemp.body = row.body
        this.infoTemp.qq = row.qq
        this.infoTemp.organId = row.organizationEntity.id
        this.infoTemp.id = row.id
        this.dialogFormVisible = true
      },
      comfirmChangeInfo() {
        modifyUserInfo(this.infoTemp).then(res=>{ //修改个人基本信息
          console.log(res)
          if(res.data.result){
            let index = indexOfArray(this.infoTemp.id,this.list,'id')
            this.list[index].name = this.infoTemp.name
            this.list[index].body = this.infoTemp.body
            this.list[index].qq = this.infoTemp.qq
            // let i = indexOfArray(this.infoTemp.organId,this.bangHuiOptions,'id')
            this.list[index].organizationEntity = res.data.data.organizationEntity
            this.$message({
              type: 'success',
              message: '修改成功!',
              duration: 2000
            });
            for(var key in this.infoTemp){
              this.infoTemp[key] = null
            }
            
          }else{
            this.$message({
              type: 'warning',
              message: res.data.message,
              duration: 2000
            });
          }
          this.dialogFormVisible = false
        })
      },
      // handleCreate() {
      //   this.resetTemp()
      //   this.dialogStatus = 'create'
      //   this.dialogFormVisible = true
      // },
      handleGoDetail(row){ 
        this.$router.push({ name: 'personDetail', params: { row: row }})
        // this.$router.push({ path: '/membermanage/personaldetail', query: { row: row }})
      },
      handleChangePoint(row) {  //修改积分
        this.pointTemp.userId = row.id
        this.dialogPointVisible = true
      },
      confirmChangePoint() {
        if(this.pointTemp.userId&&this.pointTemp.pointNum&&this.pointTemp.reason){
          modifyUserPoint(this.pointTemp).then(res=>{ //修改个人基本信息
            console.log(res)
            if(res.data.result){
              let index = indexOfArray(this.pointTemp.userId,this.list,'id')
              this.list[index].point += res.data.data.pointNum
              this.$message({
                type: 'success',
                message: '修改成功!',
                duration: 2000
              });
              for(var key in this.pointTemp){
                this.pointTemp[key] = null
              }
              
            }else{

            }
            this.dialogPointVisible = false
          })
        }
      }
    }
  };
</script>
<style scoped>
    .input_edit{
        width: 200px;
        float: left;
        margin-right:10px;
    }
    .cell{
        padding: 0 5px !important;
        overflow: auto;
    }
    .filter-container {
      padding-bottom: 10px;
    }
    .filter-item {
      display: inline-block;
      vertical-align: middle;
      margin-bottom: 10px;
    }
    .avatar {
      width: 90px;
      height: 90px;
      /*border-radius: 50%;*/
      margin-top: 10px;
      margin-bottom: 10px;
      display: block;
    }
</style>
